<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>vuedemo1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--数据动态绑定-->
        <div id="app">
            {{message}}
        </div>

        <div id="app-2">
            <span v-bind:title="message">
                鼠标悬停几秒查看此处动态绑定的信息
            </span>
        </div>

        <!--if-else的用法-->
        <div id="app3">
            <p v-if="seen">你可以看到我</p>
            <p v-else>你不可以看到我</p>
        </div>

        <!--循环-->
        <div id="app4">
            <ol>
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
        </div>

        <!--处理用户输入-->
        <div id="app5">
            <p>{{message}}</p>
            <button v-on:click="reverseMessage">逆转消息</button>
        </div>

        <!--表单输入与应用状态之间的双向绑定-->
        <div id="app6">
            <p>{{message}}</p>
            <input v-model="message">
        </div>

        <script>
            new Vue({
                el:'#app',
                data:{
                    message:'Hello Vue!'
                }
            });

            new Vue({
                el:'#app-2',
                data:{
                    message:'页面加载于'+new Date()
                }
            });

            new Vue({
                el:'#app3',
                data:{
                    seen:true
                }
            });

            new Vue({
               el:'#app4',
                data:{
                   todos:[
                       {text:'学习JavaScript'},
                       {text:'学习Vue'},
                       {text:'学习牛逼的项目'}
                   ]
                }
            });

            new Vue({
               el:"#app5",
                data:{
                   message:'Hello 许伟杰'
                },
                methods:{
                    reverseMessage:function () {
                        this.message=this.message.split('').reverse().join('')
                    }
                }
            });

            new Vue({
                el:"#app6",
                data:{
                    message:'Hello Vue'
                }
            });
        </script>
    </body>
</html>